<template>
<div class="article">
  <div class="level">
    <div class="level-tool">
      <div class="tool-rad">
        <div class="rad-dot">1225</div>
        <EyeOutlined />
      </div>
      <div class="tool-rad">
        <div class="rad-dot">85</div>
        <CommentOutlined /></div>
    </div>
  </div>
  <div class="article-content">
    <VueMdItem :textarea="comments.content"/>
  </div>
  <aside class="article-aside">
    <div class="aside-box">
      <div class="hot-box"></div>
      <div class="tab-box"></div>

    </div>
  </aside>

</div>
</template>

<script setup>
import {reactive,onMounted} from "vue";
import {useRoute} from 'vue-router'
import {GetArticle} from '@/utils/api'
import VueMdItem from '../../components/vue-markdown-it.vue'
// mdRouter md路由组件
import CreateMDRouter from '../../markdown/index'
//md路由模块
const mdRouter = new CreateMDRouter()
const readMdFile = (filename)=>{
  mdRouter.push({name:filename}).then((res) =>{
    // console.log(mdRouter.history)
    if (res.default){
      comments.content  = res.default
    }
  }).catch((err)=>{
    console.log(err)
  })
}
const onGo = ()=>{
  mdRouter.go(-1).then((res) =>{
    console.log(mdRouter.history)
    if (res.default){
      textarea.value  = res.default
      current.value  = res.name
    }
  }).catch((err)=>{
    console.log(err)
  })
}

let comments = reactive({
  content:'2333'
})
let route = useRoute()
onMounted(()=>{
  // readMdFile(route.query.alias)
  GetArticle(route.query.id).then(res=>{
    console.log(res)
  })
  // console.log(  route.query.detail)
})


</script>

<style scoped>
.article{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
}
.level{
  width: 50px;
  height: 100vh;
  margin:0 15px;
  position: relative;
}
.level-tool{
  position: fixed;
  top: 50%;
  width: 50px;
  height: 400px;
}
.tool-rad{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  margin: 10px 0;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #939394;
  cursor: pointer;
  position: relative;
  /*color: #c2c8d1;*/
}
.tool-rad:hover span{
  color: #5c5d5e;
}
.rad-dot{
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 18px;
  background-color: #c2c8d1;
  color: #fff;
  position: absolute;
  right: -10px;
  font-size: 12px;
}

.article-content{
  width: 980px;
  height: 120vh;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 3px hsla(0, 0%, 75%, 0.8);
  padding: 15px;
}
.article-aside{
  position: relative;
}
.aside-box{
  width: 300px;
  height: 500px;
  position: fixed;
  padding: 0 5px ;
}
.hot-box{
  width: 100%;
  height: 280px;
  background-color: #fff;
  box-shadow: 0 0 3px hsla(0, 0%, 75%, 0.8);
}
.tab-box{
  width: 100%;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 3px hsla(0, 0%, 75%, 0.8);
  margin: 10px 0;
}
</style>